<template>
    <div id="main">
        <div id="box">
            <div ref="pieChart" style="width: 500px; height: 500px;"></div>
            <div ref="barChart" style="width: 800px; height: 500px;"></div>
        </div>
        <div id="box">
            <div ref="lineChart" style="width: 700px; height: 500px;"></div>
        </div>
    </div>
</template>
<script>
  import * as echarts from 'echarts';
  import 'echarts/lib/chart/bar';
  import 'echarts/lib/component/tooltip';
  export default {
    mounted() {
      this.createChart();
    },
    methods: {
      createChart() {
        const chartDom = this.$refs.pieChart;
        const myChart = echarts.init(chartDom);
        const chartDemo = this.$refs.barChart;
        const myChart1 = echarts.init(chartDemo);
        const chartDemo1 = this.$refs.lineChart;
        const myChart2 = echarts.init(chartDemo1);

        const option = {
          title: {
            text: '饼图',
            left: 'center',
            // top: 'center',
            textStyle: {
              color: '#333',
              fontSize: 18
            }
          },  
          series: [
            {
              type: 'pie',
            //   radius: ['10%', '70%'],
              data: [
                { value: 1048, name: '搜索引擎' },
                { value: 735, name: '直接访问' },
                { value: 580, name: '邮件营销' },
                { value: 484, name: '联盟广告' },
                { value: 300, name: '视频广告' }
              ],
              label: {
                show: true
              },
              labelLine: {
                show: true
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '25',
                  fontWeight: 'bold'
                }
              }
            }
          ]
        };
        const option1 = {
  title: {
    text: 'Waterfall Chart',
    subtext: 'Living Expenses in Shenzhen'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function (params) {
      var tar = params[1];
      return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    splitLine: { show: false },
    data: ['Total', 'Rent', 'Utilities', 'Transportation', 'Meals', 'Other']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Placeholder',
      type: 'bar',
      stack: 'Total',
      itemStyle: {
        borderColor: 'transparent',
        color: 'transparent'
      },
      emphasis: {
        itemStyle: {
          borderColor: 'transparent',
          color: 'transparent'
        }
      },
      data: [0, 1700, 1400, 1200, 300, 0]
    },
    {
      name: 'Life Cost',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        position: 'inside'
      },
      data: [2900, 1200, 300, 200, 900, 300]
    }
  ]
};
const option2 = {
  title: {
    text: '折线图堆叠'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      smooth:true,
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
    //   stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};
        myChart.setOption(option);
        myChart1.setOption(option1);
        myChart2.setOption(option2);
      }
    },
  };
</script>
<style scoped>
#main{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
 #box{
    /* margin-top: auto; */
    /* margin-left: 150px; */
    display: flex;
    justify-content: center;
 }
</style>